<template>
  <div class="card">
    <div class="top jcb aic">
      <div style="color: #999; font-size: 13px">
        {{ title }}
      </div>
      <div>
        <el-tooltip
          class="item"
          effect="dark"
          :content="instructions"
          placement="top-start"
        >
          <i class="el-icon-warning-outline cP" style="color: #999; font-size: 16px"></i>
        </el-tooltip>
      </div>
    </div>
    <div class="content">
        <div v-if="type==1">
            <h1 class="number">2,081</h1>
            <div  id="typebox1"></div>
            <div class="footer">
                每天访问 230
            </div>
        </div>
         <div v-if="type==2">
            <h1 class="number">￥126,560</h1>
           <div id="typebox2" class="fdc  jcb">
                <div class="aic">
                周同比 <div class="mx5 text-center" style="width:30px">12%</div> <i class="el-icon-caret-top" style="color:red"></i>
            </div>
             <div class="aic">
                日同比 <div class="mx5 text-center" style="width:30px">2%</div><i class="el-icon-caret-bottom" style="color:#52c41a"></i>
            </div>
           </div>
            <div class="footer">
                日均销售额 ￥ 234.56
            </div>
        </div>
         <div v-if="type==3">
            <h1 class="number">6,061</h1>
            <div  id="typebox3"></div>
            <div class="footer">
                转化率 60%
            </div>
        </div>
          <div v-if="type==4">
            <h1 class="number">78%</h1>
            <div  id="typebox4" class="aic ">
              <el-progress style="width: 100%;" :percentage="78"></el-progress>
            </div>
            <div class="footer aic jca">
                   <div class="aic">
                周同比 <div class="mx5 text-center" style="width:30px">12%</div> <i class="el-icon-caret-top" style="color:red"></i>
            </div>
             <div class="aic">
                日同比 <div class="mx5 text-center" style="width:30px">2%</div><i class="el-icon-caret-bottom" style="color:#52c41a"></i>
            </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref,  reactive, defineEmits, onMounted, onUpdated } from "vue";
import * as echarts from 'echarts';
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/

const state = reactive({});

defineProps({
  title: {//标题
    type: String,
  },
  instructions: { //备注
    type: String,
  },
   type: { //类型 1 访问量 2 成交额 3支付笔数 4 活动效果
    type: String,
  },
});
var myChart:any,myChart3:any

const type1 = ()=>{
  var option:any,option3:any,option4:any;
    var chartDom:any = document.getElementById('typebox1');
    var chartDom3:any =  document.getElementById('typebox3');
 myChart = echarts.init(chartDom);
 myChart3=echarts.init(chartDom3);
option = {
      tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  xAxis: {
    type: 'category',
    show:false,
  boundaryGap: false,
  },
  yAxis: {
    type: 'value',
    show:false
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
       showSymbol: false,
         lineStyle: {
        width: 0
      },
        areaStyle: {
            color:"#74bcff"
        }
    }
  ]
};
option3 = {
      tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  xAxis: {
    type: 'category',
    show:false,
  boundaryGap: false,
  },
  yAxis: {
    type: 'value',
    show:false
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'bar',
       showSymbol: false,
         lineStyle: {
        width: 0
      },
        areaStyle: {
            color:"#74bcff"
        }
    }
  ]
};


myChart3.setOption(option3);
 myChart.setOption(option);
}
onMounted(() => {

  setTimeout(() => {
     type1()
 window.addEventListener("resize",()=>{
  myChart3.resize();
  myChart.resize();
 })
  }, 500);
})
onUpdated(() => {
   
})
</script>

<style scoped lang="scss">
.card {
  background-color: #fff;
  padding: 15px;
  .top {
    padding-bottom: 5px;
    border-bottom: 1px solid #f0f0f0;
  }
  .content{
      .number{
          line-height: 4rem;
      }
      #typebox1,#typebox2,#typebox3,#typebox4{
          height:65px;
          padding-bottom: 15px;
          width: 100%;
          
      }

      .footer{
           border-top: 1px solid #f0f0f0;
          padding-top: 10px;
          color: rgba(0,0,0,.65);
            font-size: 14px;
            font-variant: tabular-nums;
            line-height: 1.5;
            list-style: none;
            font-feature-settings: "tnum";
      }
  }
}
</style>
